<template>
  <span>
    <span v-if="step.conditionType === 1">
      <el-tag v-if="step.desc" size="small" style="margin-right: 5px;" type="info">{{ step.desc }}</el-tag>
      <el-tag size="small" type="warning" style="margin-right: 10px">if</el-tag>
    </span>
    <span v-if="step.conditionType === 2">
      <el-tag v-if="step.desc" size="small" style="margin-right: 5px;" type="info">{{ step.desc }}</el-tag>
      <el-tag size="small" type="warning" style="margin-right: 10px">else if</el-tag>
    </span>
    <span v-if="step.conditionType === 3">
      <el-tag v-if="step.desc" size="small" style="margin-right: 5px;" type="info">{{ step.desc }}</el-tag>
      <el-tag size="small" type="warning" style="margin-right: 10px">else</el-tag>
    </span>
    <span v-if="step.conditionType === 4">
      <el-tag v-if="step.desc" size="small" style="margin-right: 5px;" type="info">{{ step.desc }}</el-tag>
      <el-tag size="small" type="warning" style="margin-right: 10px">while</el-tag>
    </span>
    <span v-if="step.conditionType === 5">
      <el-tag v-if="step.desc" size="small" style="margin-right: 5px;" type="info">{{ step.desc }}</el-tag>
      <el-tag size="small" type="warning" style="margin-right: 10px">for</el-tag>
      <el-tag type="info" size="small">{{ step.extra1 }} 次</el-tag>
    </span>
    <span v-if="step.stepType === 0">
      <el-tag v-if="step.desc" size="small" style="margin-right: 5px;" type="info">{{ step.desc }}</el-tag>
      <!--      <el-tag v-if="step.errorHandlingType === 1" size="small" effect="plain" type="danger" style="margin-left: 5px;">遇异常: 忽略</el-tag>-->
      <!--      <el-tag v-else-if="step.errorHandlingType === 2" size="small" effect="plain" type="warning" style="margin-left: 5px;">遇异常: 警告</el-tag>-->
    </span>
    <span v-if="step.stepType === 4">
      <el-tag v-if="step.desc" size="small" style="margin-right: 5px;" type="info">{{ step.desc }}</el-tag>
      <el-tag type="warning" size="small">执行公共步骤</el-tag>
      <el-tag type="info" size="small" style="margin-left: 10px;">{{ findApiName(step.stepType, step.apiId) }}</el-tag>
      <!--      <el-tag v-if="step.errorHandlingType === 1" size="small" effect="plain" type="danger" style="margin-left: 5px;">遇异常: 忽略</el-tag>-->
      <!--      <el-tag v-else-if="step.errorHandlingType === 2" size="small" effect="plain" type="warning" style="margin-left: 5px;">遇异常: 警告</el-tag>-->
    </span>
    <span v-if="step.stepType === 11">
      <el-tag v-if="step.desc" size="small" style="margin-right: 5px;" type="info">{{ step.desc }}</el-tag>
      <el-tag size="small">HTTP</el-tag>
      <el-tag type="info" size="small" style="margin-left: 10px;">{{ findApiName(step.stepType, step.apiId) }}</el-tag>
      <!--      <el-tag v-if="step.errorHandlingType === 1" size="small" effect="plain" type="danger" style="margin-left: 5px;">遇异常: 忽略</el-tag>-->
      <!--      <el-tag v-else-if="step.errorHandlingType === 2" size="small" effect="plain" type="warning" style="margin-left: 5px;">遇异常: 警告</el-tag>-->
    </span>
    <span v-if="step.stepType === 12">
      <el-tag v-if="step.desc" size="small" style="margin-right: 5px;" type="info">{{ step.desc }}</el-tag>
      <el-tag size="small">Websocket</el-tag>
      <el-tag type="info" size="small" style="margin-left: 10px;">{{ findApiName(step.stepType, step.apiId) }}</el-tag>
      <!--      <el-tag v-if="step.errorHandlingType === 1" size="small" effect="plain" type="danger" style="margin-left: 5px;">遇异常: 忽略</el-tag>-->
      <!--      <el-tag v-else-if="step.errorHandlingType === 2" size="small" effect="plain" type="warning" style="margin-left: 5px;">遇异常: 警告</el-tag>-->
    </span>
    <span v-if="step.stepType === 14">
      <el-tag v-if="step.desc" size="small" style="margin-right: 5px;" type="info">{{ step.desc }}</el-tag>
      <el-tag type="warning" size="small">执行数据库语句</el-tag>
      <el-tag type="info" size="small" style="margin-left: 10px;">{{ findApiName(step.stepType, step.apiId) }}</el-tag>
      <!--      <el-tag v-if="step.errorHandlingType === 1" size="small" effect="plain" type="danger" style="margin-left: 5px;">遇异常: 忽略</el-tag>-->
      <!--      <el-tag v-else-if="step.errorHandlingType === 2" size="small" effect="plain" type="warning" style="margin-left: 5px;">遇异常: 警告</el-tag>-->
    </span>
    <span v-if="step.stepType === 15">
      <el-tag v-if="step.desc" size="small" style="margin-right: 5px;" type="info">{{ step.desc }}</el-tag>
      <el-tag type="warning" size="small">执行 SSH 脚本</el-tag>
      <el-tag type="info" size="small" style="margin-left: 10px;">{{ findApiName(step.stepType, step.apiId) }}</el-tag>
      <!--      <el-tag v-if="step.errorHandlingType === 1" size="small" effect="plain" type="danger" style="margin-left: 5px;">遇异常: 忽略</el-tag>-->
      <!--      <el-tag v-else-if="step.errorHandlingType === 2" size="small" effect="plain" type="warning" style="margin-left: 5px;">遇异常: 警告</el-tag>-->
    </span>
    <span v-if="step.stepType === 101">
      <el-tag v-if="step.desc" size="small" style="margin-right: 5px;" type="info">{{ step.desc }}</el-tag>
      <el-tag size="small" style="margin-right: 5px">步骤间隔</el-tag>
      每个步骤间隔 {{ step.extra1 }} ms
      <!--      <el-tag v-if="step.errorHandlingType === 1" size="small" effect="plain" type="danger" style="margin-left: 5px;">遇异常: 忽略</el-tag>-->
      <!--      <el-tag v-else-if="step.errorHandlingType === 2" size="small" effect="plain" type="warning" style="margin-left: 5px;">遇异常: 警告</el-tag>-->
    </span>
    <span v-if="step.stepType === 103">
      <el-tag v-if="step.desc" size="small" style="margin-right: 5px;" type="info">{{ step.desc }}</el-tag>
      <el-tag size="small" style="margin-right: 5px">断言</el-tag>
      断言内容  {{ step.extra1 }}
      <!--      <el-tag v-if="step.errorHandlingType === 1" size="small" effect="plain" type="danger" style="margin-left: 5px;">遇异常: 忽略</el-tag>-->
      <!--      <el-tag v-else-if="step.errorHandlingType === 2" size="small" effect="plain" type="warning" style="margin-left: 5px;">遇异常: 警告</el-tag>-->
    </span>
    <span v-if="step.stepType === 104">
      <el-tag v-if="step.desc" size="small" style="margin-right: 5px;" type="info">{{ step.desc }}</el-tag>
      <el-tag size="small" style="margin-right: 5px">保存变量</el-tag>
      保存内容 {{ step.extra1 }}
      <!--      <el-tag v-if="step.errorHandlingType === 1" size="small" effect="plain" type="danger" style="margin-left: 5px;">遇异常: 忽略</el-tag>-->
      <!--      <el-tag v-else-if="step.errorHandlingType === 2" size="small" effect="plain" type="warning" style="margin-left: 5px;">遇异常: 警告</el-tag>-->
    </span>
    <span v-if="step.stepType === 105">
      <el-tag v-if="step.desc" size="small" style="margin-right: 5px;" type="info">{{ step.desc }}</el-tag>
      <el-tag size="small" style="margin-right: 5px">强制等待</el-tag>
      等待 {{ step.extra1 }} s
      <!--      <el-tag v-if="step.errorHandlingType === 1" size="small" effect="plain" type="danger" style="margin-left: 5px;">遇异常: 忽略</el-tag>-->
      <!--      <el-tag v-else-if="step.errorHandlingType === 2" size="small" effect="plain" type="warning" style="margin-left: 5px;">遇异常: 警告</el-tag>-->
    </span>
    <span v-if="step.stepType === 106">
      <el-tag v-if="step.desc" size="small" style="margin-right: 5px;" type="info">{{ step.desc }}</el-tag>
      <el-tag size="small" style="margin-right: 5px">WebSocket 智能等待</el-tag>
      最大等待 {{ step.extra1 }} s
      <!--      <el-tag v-if="step.errorHandlingType === 1" size="small" effect="plain" type="danger" style="margin-left: 5px;">遇异常: 忽略</el-tag>-->
      <!--      <el-tag v-else-if="step.errorHandlingType === 2" size="small" effect="plain" type="warning" style="margin-left: 5px;">遇异常: 警告</el-tag>-->
    </span>
    <span v-if="step.stepType === 107" style="display: inline-block; margin-top: 10px; margin-right: 10px; flex: 1;">
      <el-tag v-if="step.desc" size="small" style="margin-right: 5px;" type="info">{{ step.desc }}</el-tag>
      <el-tag size="small" type="warning">自定义脚本</el-tag>
      <!--      <el-tag v-if="step.errorHandlingType === 1" size="small" effect="plain" type="danger" style="margin-left: 5px;">遇异常: 忽略</el-tag>-->
      <!--      <el-tag v-else-if="step.errorHandlingType === 2" size="small" effect="plain" type="warning" style="margin-left: 5px;">遇异常: 警告</el-tag>-->
      <div class="json-editor" style="border:solid 1px #dfe4ed; width: 40vw;">
        <json-editor ref="scriptEditor" v-model="step.extra1" mode="python" />
      </div>
    </span>
    <span v-if="step.stepType === 108">
      <el-tag v-if="step.desc" size="small" style="margin-right: 5px;" type="info">{{ step.desc }}</el-tag>
      <el-tag size="small" style="margin-right: 5px">设置变量</el-tag>
      设置内容 {{ step.extra1 }}
      <!--      <el-tag v-if="step.errorHandlingType === 1" size="small" effect="plain" type="danger" style="margin-left: 5px;">遇异常: 忽略</el-tag>-->
      <!--      <el-tag v-else-if="step.errorHandlingType === 2" size="small" effect="plain" type="warning" style="margin-left: 5px;">遇异常: 警告</el-tag>-->
    </span>
  </span>
</template>

<script>
import JsonEditor from '@/components/JsonEditor'

export default {
  components: { JsonEditor },
  props: {
    step: {
      type: Object,
      default() {
        return {}
      }
    },
    apiOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
    }
  },
  watch: {
    step: { // 监听 step 的变化
      handler(value) {
        this.flushStepData(value)
      },
      deep: true
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    // 更新 step 数据（当 step 数据更新时候需要调用此方法处理一些数据格式等）
    flushStepData() {
      if (this.step.stepType === 107) { // 自定义脚本
        if (this.$refs.scriptEditor && this.$refs.scriptEditor !== undefined) {
          if (this.step.extra2 === 'python') {
            this.$refs.scriptEditor.setMode('text/x-python')
          } else if (this.step.extra2 === 'groovy') {
            this.$refs.scriptEditor.setMode('text/x-groovy')
          } else if (this.step.extra2 === 'javascript') {
            this.$refs.scriptEditor.setMode('text/javascript')
          }
          this.$refs.scriptEditor.setValue(this.step.extra1)
        }
      }
    },
    // 查找 接口（api）名称
    findApiName(stepType, id) {
      for (const item of this.apiOptions) {
        if ((-stepType) === item.id) {
          if (stepType <= 100) { // type 小于 100，表示是接口
            if (item.children) {
              const ret = this.recursionFindApiName(item.children, id)
              if (ret) {
                return item.name + ' / ' + ret
              }
            }
          } else {
            return item.name
          }
        }
      }
    },
    // 递归查找 接口（api）名称
    recursionFindApiName(apiList, id) {
      for (const api of apiList) {
        if (!api.isCatalog && api.id === id) {
          return api.name
        }
        if (api.children) {
          const ret = this.recursionFindApiName(api.children, id)
          if (ret) {
            return api.name + ' / ' + ret
          }
        }
      }
    }
  }
}
</script>
